<template>
	<view class="u-p-20">
		<view class="u-p-b-80">
			<uni-swipe-action>
				<uni-swipe-action-item :show="show" :right-options="options" v-for="(item,index) in address"
					@click="action($event,item.id)">
					<view class="swipe-action u-m-b-60" @click="selectAddress(item.id)">
						<view class="swipe-action__content">
							<view class="top">
								<view class="name">{{item.name}}</view>
								<view class="phone">{{item.phone}}</view>
								<view class="tag" v-if="item.is_default">
									<text>默认</text>
								</view>
							</view>
							<view class="bottom">
								{{item.province + item.city + item.county + item.address}}
								<u-icon name="edit-pen" :size="22" color="#999" @click.native.stop="modifyAddress(item.id)"></u-icon>
							</view>
						</view>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</view>
		<view class="addSite" @click="toAddSite">
			<view class="add">
				<u-icon name="plus" color="#ffffff" :size="30"></u-icon>新建收货地址
			</view>
		</view>
	</view>
</template>

<script>
	let access_token;
	export default {
		data() {
			return {
				show: 'none',
				options: [{
					text: '设为默认',
					style: {
						backgroundColor: '#3c9cff'
					}
				}, {
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}],
				address: []
			}
		},
		onLoad() {
			if (!uni.$u.utils.isLogin()) {
				return;
			}
			access_token = uni.getStorageSync('access_token');
			this.getData();
		},
		methods: {
			toAddSite(){
				uni.$u.route('/pages/cart/newAddress');
			},
			modifyAddress(id){
				//console.log(id);
				uni.$u.route('/pages/cart/modifyAddress',{id:id})
			},
			selectAddress(id){
				//需要判断来源。如果是从个人中心过来 ，则不能跳转
				//console.log(getCurrentPages());
				const source= getCurrentPages();
				//console.log(source[source.length - 2]);
				//console.log(source[source.length - 2].route);
				if(source[source.length - 2].route !== 'pages/my/my'){
					//说明不是从个人中心过来 ，需要跳转
					uni.$u.route("/pages/cart/order",{id:id})
				}
			},
			async action(e, id) {
				//console.log(e, id);
				if (e.index === 0) {
					//设置默认地址
					let res = await uni.$u.http.post("/api/address/" + id + "/default", {
						_method: 'patch'
					}, {
						header: {
							Authorization: 'bearer ' + access_token
						}
					})
					if (res !== false) {
						uni.$u.toast('设置成功');
						this.show = 'none';
						//更新默认图标的显示
						//先查找旧的默认地址的index
						let index_default_old = this.address.findIndex(item => {
							if(item.is_default){
								//说明当前item就是默认地址
								return true;
							}
						})  //如果找到 ，则返回其索引，找不到，则返回-1
						if(index_default_old != -1){
							let item = this.address[index_default_old];
							this.address.splice(index_default_old, 1, Object.assign(item, {
								is_default:0
							}))
						}
						//再查找当前新设置地址的index
						let index_default_new= this.address.findIndex(item => {
							if(item.id == id){
								//说明当前item就是正在设置的地址
								return true;
							}
						})  
						let item = this.address[index_default_new];
						this.address.splice(index_default_new, 1, Object.assign(item, {
							is_default:1
						}))
					}
				} else if (e.index === 1) {
					//删除地址
					let res = await uni.$u.http.delete("/api/address/" + id , {}, {
						header: {
							Authorization: 'bearer ' + access_token
						}
					})
					//console.log(res);
					if(res !== false){
						//console.log(1111);
						uni.$u.toast('删除成功');
						//还要将本地列表该项目删除
						const index = this.address.findIndex(item =>{
							if(item.id == id){
								return true;
							}
						})
						this.address.splice(index,1);
					}
				}
			},
			async getData() {
				let res = await uni.$u.http.get('/api/address', {
					header: {
						Authorization: 'bearer ' + access_token
					}
				})
				console.log(res);
				this.address = res.data;
			}
		}
	}
</script>

<style lang="scss">
	/deep/ .button-group--right{
		height: 60px;
	} 
	.top {
		display: flex;
		font-weight: bold;
		font-size: 18px;
		margin-bottom: 8px;

		.phone {
			margin-left: 60rpx;
		}

		.tag {
			display: flex;
			width: 60rpx;
			height: 30rpx;
			line-height: 30rpx;
			color: white;
			font-size: 12px;
			border-radius: 30rpx;
			margin-left: 30rpx;
			padding: 4px 8px;
			justify-content: center;
			background-color: rgb(49, 145, 253);
		}
	}

	.bottom {
		display: flex;
		font-size: 15px;
		justify-content: space-between;
		color: #999;
	}

	.addSite {
		display: flex;
		justify-content: space-around;
		width: 600rpx;
		height: 100rpx;
		line-height: 100rpx;
		position: fixed;
		bottom: 30rpx;
		left: 80rpx;
		background-color: red;
		border-radius: 60rpx;
		font-size: 25px;
		z-index: 9999;

		.add {
			display: flex;
			align-items: center;
			color: #fff;

			.u-icon {
				margin-right: 10px;
			}
		}
	}
</style>
